<template>
	<view>
		<view class="header u-flex u-p-l-46 u-p-r-46 u-row-between">
			<text class="u-font-34">酒庄</text>
			<view class="u-font-30">
				<view class="u-m-b-10">提成比例：0%</view>
				<view>下级提成比例：0%</view>
			</view>
		</view>
		<view class="u-p-l-46 u-p-r-46">
			<view class="block b-l " hover-class="cell-hover">
				<view class="u-flex">
					<text>我的激活码</text>
				</view>
				<u-icon name="arrow-right" color="#282828" size="28"></u-icon>
			</view>
			<view class="block b-l " hover-class="cell-hover">
				<view class="u-flex">
					<text>我的客户</text>
				</view>
				<u-icon name="arrow-right" color="#282828" size="28"></u-icon>
			</view>
			<view class="block b-l " hover-class="cell-hover">
				<view class="u-flex">
					<text>团队业绩 订单金额：324400.00 </text>
				</view>
				<u-icon name="arrow-right" color="#282828" size="28"></u-icon>
			</view>
			<view class="block b-l " hover-class="cell-hover">
				<view class="u-flex">
					<text>商品销量：45.00</text>
				</view>
				<u-icon name="arrow-right" color="#282828" size="28"></u-icon>
			</view>
			<view class="block b-l " hover-class="cell-hover">
				<view class="u-flex">
					<text>提成概括</text>
				</view>
				<u-icon name="arrow-right" color="#282828" size="28"></u-icon>
			</view>
		</view>
		<view class="myProfit">
			<view class="title u-flex u-p-l-46 u-font-34">
				<text>我的收益</text>
			</view>
			<view class="u-flex u-row-between u-m-t-40 u-p-l-46 u-p-r-46">
				<view class="u-flex">
					<text class="u-font-28 col666">余额</text>
					<view class="colFE0101">
						<text class="u-font-28 u-m-l-28 u-m-r-16">¥</text>
						<text class="w600 u-font-60">365.26</text>
					</view>
				</view>
				<u-button shape="circle">
					<view class="u-flex col333">
						<text class="u-font-28">提现</text>
						<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
					</view>
				</u-button>
			</view>
			<view class="grid u-font-28 u-m-t-78 u-m-b-78">
				<view class="u-flex u-flex-col">
					<text class="col666 u-m-b-44">本周</text>
					<view class="col333 w600">
						<text class="u-font-28">¥</text>
						<text class="u-font-60">365.26</text>
					</view>
				</view>
				<view class="u-flex u-flex-col">
					<text class="col666 u-m-b-44">本月累计提现</text>
					<view class="w600 col333">
						<text class="u-font-28">¥</text>
						<text class="u-font-60">365.26</text>
					</view>
				</view>
			</view>
			<view class="grid u-m-b-38 u-font-30 col23">
				<view class="u-flex u-flex-col bd-b u-p-b-30">
					<image class="img" src="~@/static/item2.png" mode=""></image>
					<text class="u-m-t-24 ">未结算佣金</text>
				</view>
				<view class="u-flex u-flex-col bd-b u-p-b-30 bd-l">
					<image class="img" src="~@/static/distribution/dingdan.png" mode=""></image>
					<text class="u-m-t-24">已结算佣金</text>
				</view>
				<view class="u-flex u-flex-col u-p-t-30">
					<image class="img" src="~@/static/distribution/jilu.png" mode=""></image>
					<text class="u-m-t-24">提成</text>
				</view>
				<view class="u-flex u-flex-col bd-l u-p-t-30">
					<image class="img" src="~@/static/distribution/tuandui.png" mode=""></image>
					<text class="u-m-t-24">平级奖</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.header {
		color: #FFFFFF;
		height: 189upx;
		background: #282828;
	}
	.cell-hover {
		background-color: rgba(213, 213, 213, 0.5);
	}
	.block {
		padding: 28upx 0;
		font-size: 24upx;
		font-family: Microsoft YaHei;
		color: #282828;
		display: flex;
		justify-content: space-between;
	}
	.b-l {
		border-bottom: 1px solid #EEEEEE;
	}
	.myProfit {
		.title {
			height: 80upx;
			border-bottom: 1px solid #F4F4F4;
			font-family: SourceHanSansSC;
			font-weight: 500;
			color: #333333;
		}
	}
	.w600 {
		font-weight: 600;
	}
	.col333 {
		color: #333333;
	}
	.col666 {
		color: #666666;
	}
	.colFE0101 {
		color: #FE0101;
	}
	.col23 {
		color: #232323;
	}
	.u-font-60 {
		font-size: 40upx;
		font-weight: 500;
	}
	.grid {
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.bd-b {
		border-bottom: 1px solid #EEEEEE;
	}
	.bd-l {
		border-left: 1px solid #EEEEEE;
	}
	.img {
		width: 50upx;
		height: 50upx;
	}
</style>
